<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
    <!-- 导入 JQ 库文件 -->
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
    <h1>用户登录</h1>

    <form id="frm">
        用户名：<input type="text" id="name"/><br/>
        密码：<input type="text" id="pass"/><br/>
        <!-- 异步请求：按钮必须为普通按钮 -->
        <button type="button" id="btn">登录</button>
        <span id="jg"></span>
    </form>

    <script>
        $("#btn").click(function(){
            $.ajax("login.do",{
                type:'post',
                data:{
                    username:$("#name").val(),
                    password:$("#pass").val()
                },
                success:function ( data ) {
                    // 获取服务器响应的数据，对此数据进行判断
                    // data = success / error
                    if(data=="error") {
                        $("#jg").text("错误的帐号或密码")
                            .css("color","red") ;
                    } else {
                        // 1.把登录的帐号，设置在本地存储（localStorage）中，从而实现跨页面共享数据
                        localStorage.setItem("name",$("#name").val())

                        // 2.页面跳转
                        location.href = "welcome.html"
                    }
                }
            }) ;
        }) ;
    </script>
</body>
</html>